<template>
	<view>
		<!-- 有活动 -->
		<view class="exist-activity" v-if="activities.length != 0">
			<scroll-view scroll-y="true" :style="'height:'+height+'px'" scroll-with-animation @scrolltolower="getActivies">
				<view class="activity-mag" v-for="(activity,index) in activities" :key='activity.activity_id' @click="enterDetails(activity.activity_id)">
					<view class="activity-mag-img">
						<image :src="activity.cover_image" mode="aspectFill"></image>
						<text v-if="activity.activity_type!= 0">拼团</text>
						<text v-else>特惠</text>
					</view>
					<view class="course-msg">
						{{activity.title | getStr(22)}}
					</view>
					<view class="join-msg">
						<view class="num-human">
							<view class="">
								{{activity.total_participants}}人已参与，剩余名额<text>{{activity.total_remaining}}</text>个
							</view>
							<view class="botline">
								<!-- 底下的进度条 -->
								<view class="topline" :style="{width:activity.participant_percent + '%'}"></view>
							</view>
						</view>
						<view class="" @click.stop="enterDetails(activity.activity_id)">
							立即参与
						</view>
					</view>
					<view class="activity-addr" v-if="activity.sale_rooms.length>0">
						<view>活动地区:</view>
						<view>
							<p v-for="(sale_room,index) in activity.sale_rooms" :key='index'>{{ sale_room }} </p>
						</view>
					</view>
					<view class="activity-addr" v-else>

					</view>
				</view>
				<ending v-if="page > last_page"></ending>
			</scroll-view>
		</view>
		<!-- 无活动 -->
		<view class="no-activity" v-else>
			<view class="no-activity-tip" v-if="is_current_store_owner == 1">
				你还没有任何活动，请先建立自己运营活动
			</view>
			<view class="no-activity-img">
				<image :src="imglink + 'nothing-activity.png'" mode=""></image>
				<view class="">
					你还没有任何活动哦！
				</view>
			</view>
			<view class="found-activity" @click="organizationEnter" v-if="is_current_store_owner == 1">
				创建新活动
			</view>
		</view>
		<tabBar :storeId='store_id'></tabBar>
	</view>
</template>

<script>
	import ending from '../../../common/ending.vue'
	import tabBar from '@/common/tabBar.vue'
	export default {
		filters: {
			getStr(str, new_length) {

				// console.log('getStr', str);
				if (!str) {
					return ''
				}
				if (str.length > new_length) {
					return str.slice(0, new_length) + '...'
				} else {
					return str
				}
			},
		},
		components: {
			ending,
			tabBar
		},
		data() {
			return {
				imglink: this.$store.state.imgLink,
				width: [],
				height: 0,
				meta_tag_title: '',
				store_id: 0,
				store_info: {},
				token: '',
				customer_info: {},
				is_current_store_owner: 0,
				activities: [],
				page: 0,
				page_size: 8,
				last_pag: 1,
				current_page: 1,
				windowWidth: 0,
				windowHeight: 0
			}
		},
		onLoad(options) {
			const {
				windowWidth,
				windowHeight
			} = uni.getSystemInfoSync();
			this.windowWidth = windowWidth;
			this.windowHeight = windowHeight;
			let store_id = parseInt(options.store_id, 10);
			if (!store_id > 0) {
				store_id = uni.getStorageSync('store_id')
			} else {
				uni.setStorageSync('store_id', store_id)
			}
			this.store_id = store_id
			this.$store.commit('updateStoreId', store_id)

			let pages = getCurrentPages()
			this.currentPge = pages[0].$route.fullPath

			let token = options.token;
			if (!token) {
				token = uni.getStorageSync('token')
			} else {
				uni.setStorageSync('token', token);
			}
			if (!token) {
				let url = this.$store.state.URL + "/customer/user/wx_login?page=" + encodeURIComponent(this.currentPge)
				location.href = url
				return
			}
			this.token = token
			this.$store.commit('updateToken', token)

			this.share_customer_id = options.share_customer_id

			this.height = parseInt(uni.getSystemInfoSync().windowHeight) - this.height

			//  去除分享链接中分享者的token
			const stateObj = this.currentPge
			let pattern = /(&token+.*&)|(&token+.*)/
			this.currentPge = this.currentPge.replace(pattern, '&')
			history.replaceState(stateObj, "", this.currentPge)
		},
		async onShow() {

			// 获取店铺信息
			await this.getStore()
			if (this.store_info.name) {
				uni.setNavigationBarTitle({
					title: this.store_info.name
				})
			}


			// // 获取用户信息

			await this.getActivies()
		},

		methods: {
			async getStore() {
				try {
					const data = {
						customer_store_id: this.store_id
					}
					this.$api.gain_shop_msg(data).then(res => {
						// console.log(res)
						if (res.status) {
							this.store_info = res.data
							this.$store.commit('updataCustomerId', this.store_info.customer_id);
							uni.setStorageSync('customer_id', this.store_info.customer_id)

						}
					}).catch(err => {
						console.log(err)
					})
					// let store_info = (await this.$api.gain_shop_msg(data)).data
					// this.store_info = store_info

				} catch (e) {
					console.log(e);
				}

			},
			async getCustomer() {
				const data = {
					token: this.token,
					store_id: this.store_id
				}
				this.$api.getCustomerInfo(data).then(res => {
					// console.log(res)
					if (res.status) {
						//获取活动信息
						this.customer_info = res.data
						this.$store.commit('updataUserInfo', this.customer_info.userinfo);
						uni.setStorageSync('userInfo', this.customer_info.userinfo)
						//判断用户是否为店主
						if (this.customer_info.role == 3) {
							this.is_current_store_owner = 1
						}
					}
				}).catch(err => {
					console.log(err)
				})
				// let customer_info = this.$api.getCustomerInfo(data)
				// console.log(this.customer_info)

			},
			async getActivies() {
				this.page = this.page + 1;
				if (this.page > this.last_page) {
					return false
				}

				let data = {
					page: this.page,
					pagesize: this.page_size,
					store_id: this.store_id,
					exit_type_collectioncode: true
				}
				this.$api.gain_all_act(data).then(res => {
					// console.log(res, 'gain_all_act')
					if (res.status) {
						const activities = []
						res.list.data.forEach(item => {
							if (item.active_status == 1 && item.operate_status == 1) {
								activities.push(item)
							}
						})
						this.last_page = res.list.last_page
						// console.log(activities, '1111111')
						activities.forEach(item => {

							//活动类型
							let activity_type = 0 //0团购活动
							if (item.group_purchase && item.group_purchase.length > 0) {
								activity_type = 1 //1优惠活动
							}

							//活动封面
							let cover_image = ''
							if (item.image && item.image.length > 0) {
								cover_image = item.image[0].image
							}

							//所有参与门店的地址（排除重复）
							let sale_rooms = []
							if (item.salesroom.length != 0) {

								item.salesroom.forEach(room => {
									sale_rooms.push(room.province_id + '省' + room.city_id + room.country_id + room.address);
								});

							}
							let participant_percent = 0;
							// console.log('item.virtual_total item.participants item.allowed_total', item.virtual_total, item.participants,
								// item.allowed_total);

							if (parseInt(item.allowed_total, 10) > 0) {

								participant_percent = Math.round((item.virtual_total + item.buyer) / item.allowed_total * 10000) /
									100.00
							}
							// console.log('participant_percent', participant_percent);

							this.activities.push({
								activity_id: item.activity_id,
								activity_type,
								cover_image,
								title: item.name,
								total_participants: item.virtual_total + item.buyer,
								total_remaining: (item.allowed_total -  item.buyer - item.virtual_total) > 0 ? (item.allowed_total -  item.buyer - item.virtual_total) : 0,
								sale_rooms,
								participant_percent,
							});
							// console.log(this.activities, '1111111111')

						})

					} else {

						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 2000
						})
					}
				}).catch(err => {
					console.log(err)
				})
				await this.getCustomer()
			},
			// enterDetails(activity_id){
			// 	uni.navigateTo({
			// 		url:'organization/activeDetails?page=details&actId='+activity_id + '&store_id=' + this.store_id
			// 	})
			// },
			enterDetails(activity_id) {
				uni.navigateTo({
					url: 'organization/activeDetail-3?page=details&actId=' + activity_id + '&store_id=' + this.store_id
				})
			},
			organizationEnter() {
				if (this.$store.getters.getToken) {
					uni.navigateTo({
						url: '../memberCenter/activity/createActivity?store_id=' + this.store_id
					})
				} else {
					// console.log('跳转地址',this.$store.state.URL + "customer/user/wx_login?page=pages/memberCenter/activity/createActivity&share_customer_id=1")
					location.href = this.$store.state.URL +
						"customer/user/wx_login?page=pages/memberCenter/activity/createActivity&share_customer_id=" + this.share_customer_id
				}
			},

		}
	}
</script>

<style>
	page {
		background: #F3F3F4;
	}

	.no-activity {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: white;
	}

	.no-activity-tip {
		width: 100%;
		height: 56upx;
		line-height: 56upx;
		background: #FFF7D8;
		text-align: center;
		color: #666666;
		font-size: 24upx;
	}

	.no-activity-img>image {
		width: 100%;
		height: 286upx;
		margin-top: 208upx;
	}

	.no-activity-img>view {
		color: #999999;
		font-size: 28upx;
		text-align: center;
	}

	.found-activity {
		width: 650upx;
		height: 100upx;
		line-height: 100upx;
		margin: 0 auto;
		text-align: center;
		margin-top: 92upx;
		border-radius: 44upx;
		font-size: 32upx;
		color: white;
		background: linear-gradient(to right, #FE9543, #FF664F);
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
	}

	.activity-mag {
		width: 100%;
		/* height: 708upx; */
		background: #FFFFFF;
		padding: 30upx 30upx 0 30upx;
		box-sizing: border-box;
		margin-bottom: 20upx;
	}

	.exist-activity {
		width: 100%;
	}

	.activity-mag-img {
		width: 100%;
		height: 388upx;
		/* background: rgba(0,0,0,0.3); */
		position: relative;
		text-align: center;
	}

	.activity-mag-img>image {
		width: 100%;
		/* max-width: 100%; */
		max-height: 100%;
	}

	.activity-mag-img>text {
		display: inline-block;
		width: 138upx;
		height: 60upx;
		line-height: 60upx;
		background-image: url(https://tool.tuanhaoke.cn/static/image/home/home_image_back.png);
		background-size: 100% 100%;
		font-size: 28upx;
		text-align: center;
		color: #FFFFFF;
		position: absolute;
		top: -4upx;
		left: -16upx;
	}

	.course-msg {
		color: #333333;
		font-size: 34upx;
		margin-top: 20upx;
	}

	.join-msg {
		display: flex;
		justify-content: space-between;
		margin-top: 20upx;
	}

	.num-human>view:first-child {
		color: #999999;
		font-size: 24upx;
	}

	.num-human>view:first-child>text {
		color: #FF391F;
	}

	.botline {
		width: 100%;
		height: 16upx;
		border-radius: 10upx;
		background: #F1F1F2;
		margin-top: 10upx;
		/* opacity: 0.26; */
	}

	.topline {
		background: linear-gradient(to right, #FE9543, #FF664F);
		border-radius: 20upx;
		height: 16upx;
	}

	.join-msg>view:last-child {
		width: 180upx;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		color: #FFFFFF;
		background: linear-gradient(to right, #FE9543, #FF664F);
		border-radius: 30upx;
		box-shadow: 0 4upx 12upx 0 rgba(255, 95, 63, 0.47);
		font-size: 28upx;
	}

	.activity-addr {
		width: 100%;
		padding: 14upx 0;
		box-sizing: border-box;
		font-size: 24upx;
		border-top: 1upx solid #DEDEDE;
		margin-top: 30upx;
		display: flex;
		justify-content: flex-start;
	}

	.activity-addr>view:first-child {
		color: #666666;
	}

	.activity-addr>view:last-child>p {
		color: #333333;
		text-indent: 10rpx;
		font-weight: 600;
		font-size: 24rpx;
	}
</style>
